


<template>
  <div>
    <Category :disabled="isShow === 1" />

    <SpuList v-if="isShow === 0" @setState="setState" />
    <SpuForm v-if="isShow === 1" :spuInfo="spuInfo" @setState="setState" />
    <SkuForm v-if="isShow === 2" @setState="setState" :spuInfo="spuInfo" />
  </div>
</template>

<script lang="ts">

import { defineComponent } from 'vue';
export default defineComponent({
  name: 'Spu',
});
</script>

<script setup lang="ts">
import { ref } from 'vue'
//引入组件
import SpuList from './SpuList/index.vue'
import SpuForm from './SpuForm/index.vue'
import SkuForm from './SkuForm/index.vue'

//条件
import type { SpuInfoType } from '@/api/spu';
import useAttrStore from '@/stores/attr';
import { storeToRefs } from 'pinia';

//条件渲染控制数据
let isShow = ref(0)

//拿到pinia中的三级分类数据
const attrStore = useAttrStore();
const { category3Id } = storeToRefs(attrStore);

//保存完整的spuInfo数据,如果是新增,则把初始值传递给SpuForm组件,如果是编辑,则初始数据替换,然后传递给SpuForm组件
const spuInfo = ref<SpuInfoType>({
  category3Id: category3Id.value,
  description: "",
  spuName: "",
  tmId: null,
  spuImageList: [],
  spuSaleAttrList: [],
});

/* 点击按钮切换组件 自定义事件 子传父 传参 */
//封装一个自定义事件的回调函数,接收子组件传值,控制组件展示
const setState = (state: number, row?: SpuInfoType) => {
  isShow.value = state
  /* 根据是否传 row 数据判断是新增还是 修改 */
  if (row) {
    //把编辑传递的Spu数据保存在初始值上
    spuInfo.value = row
  } else {
    //当用户点击的是新增过来的时候,spuInfo可能残留之前编辑传递过来的数据,所以我们要再次初始化spuInfo
    spuInfo.value = {
      category3Id: category3Id.value,
      description: "",
      spuName: "",
      tmId: null,
      spuImageList: [],
      spuSaleAttrList: [],
    }
  }
}






</script>